<template>
  <div class="detail_dialog">
    <el-dialog
      title="拍照"
      :visible.sync="dialog_visible"
      width="828"
      custom-class="upload_dialog"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <!-- append-to-body -->
      <!-- :popper-append-to-body="false" -->
      <div>
        <el-upload
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :auto-upload="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog
          :visible.sync="dialogVisible"
          custom-class="img_dialog"
          :close-on-click-modal="false"
        >
          <!-- append-to-body -->
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="ok_statsus" class="ok_btn" @click="ok_handle"
          >确 定</el-button
        >
        <el-button class="cancel_btn" @click="cancel_cli">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: "",
  },
  data() {
    return {
      dialog_visible: this.visible,
      ok_statsus: false,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    ok_handle() {
      // this.ok_statsus = true;
      // this.ok_statsus = false;
      this.$emit("plan_upload", false);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove() {},
    cancel_cli() {
      this.$emit("plan_upload", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.detail_dialog {
  /deep/.el-dialog__wrapper {
    z-index: 3000 !important;
  }
  /deep/.el-dialog__header {
    // padding: 14px 0 14px 16px;
    padding: (14 / 1600) * 100vh 0 (14 / 1600) * 100vh (16 / 1600) * 100vw;
    // border-bottom: 1px solid #d5d5d5;
    border-bottom: (1 / 1600) * 100vw solid #d5d5d5;
    .el-dialog__title {
      font-weight: 500;
      // font-size: 16px;
      font-size: (32 / 2560) * 100vw;
      color: #1f1f1f;
    }
  }
  /deep/.el-dialog__footer {
    // text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    .dialog-footer {
      display: flex;
    }
  }
  .upload_dialog {
    .ok_btn,
    .cancel_btn {
      // width: 128px;
      // height: 44px;
      // border-radius: 50px;
      width: (256 / 2560) * 100vw;
      height: (88 / 1600) * 100vh;
      border-radius: (100 / 2560) * 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .ok_btn {
      background: #1890ff;
      color: #fff;
    }
    .cancel_btn {
      background: #eff1f5;
      color: #1f1f1f;
      // border: 1px solid #c2c4cc;
      border-bottom: (2 / 1600) * 100vw solid #c2c4cc;
    }
  }
  /deep/ .el-upload--picture-card {
    // width: 116px;
    // height: 116px;
    // line-height: 116px;
    width: (232 / 2560) * 100vw;
    height: (232 / 1600) * 100vh;
    line-height: (232 / 1600) * 100vh;
  }
  /deep/.el-upload-list__item {
    // width: 116px;
    // height: 116px;
    width: (232 / 2560) * 100vw;
    height: (232 / 1600) * 100vh;
  }
  /deep/.el-upload-list__item-actions {
    // width: 116px;
    // height: 116px;
    width: (232 / 2560) * 100vw;
    height: (232 / 1600) * 100vh;
  }
  /deep/.img_dialog > .el-dialog__header {
    border-bottom: none !important;
  }
  /deep/.el-icon-delete:before {
    color: #ef5757;
  }
  /deep/.el-upload-list--picture-card
    .el-upload-list__item-actions
    span
    + span {
    // margin-left: 28px;
    margin-left: (28 / 2560) * 100vw;
  }
}
</style>